table{
	h4{
		margin: 0.2em 0 0.5em 0;
	}
	&.listHier{
		font-size: $default-font-size;
		border: 1px solid var(--sakai-border-color);
		background-color: var(--tool-background-color);
		margin: 1em 0;
		@media #{$phone}{
			display: block;
			margin: 3em 0;
			overflow: auto;
			width: 100%;
		}
		tr{
			td {
				border-right: 1px solid var(--sakai-border-color);
				padding: 0.25em;
				font-family: $font-family;
				font-size:   $default-font-size;
				> * {
					font-family: $font-family;
					font-size:   $default-font-size;
					font-weight: 400;
					@media #{$phone}{
						display: block;
					}
				}
			}
			&:nth-child(odd){
				background: var(--sakai-background-color-2);
				td{
					border-right: 1px solid var(--sakai-border-color);
				}
			}
		}
	}
}

.table-hover > tbody > tr:hover {
	background-color: var(--sakai-background-color-2);

	&:nth-child(odd){
		background: var(--sakai-background-color-3);
	}
}

.sakai-table-noResultsMessage {
	border: 1px solid var(--sakai-border-color);
	border-top: 0 none;
	padding: $standard-spacing;
	color: var(--sakai-text-color-2);
	line-height: 3;
}

.sakai-table-toolBar
{
	@include display-flex();
	@include align-items(flex-end);
	margin: 0;

	&+table
	{
		margin-top: 0;
		padding-top: 0;
	}

	.sakai-table-filterContainer
	{
		@include display-flex();
		@include flex-direction(column);
		margin: 0 auto 10px 0;
		padding-right: 10px;

		label
		{
			margin: 0 4px 0 0;
		}
	}
	.sakai-table-filterGroupContainer
	{
		@include display-flex();
		@include flex-direction(column);
		margin: 0 10px 10px 0;
		padding-right: 10px;

		label
		{
			margin: 0 4px 0 0;
		}
	}
	.sakai-table-viewFilter, .sakai-table-searchFilter
	{
		@include display-flex();
		@include align-items(center);
	}
	.sakai-table-viewFilter ~ .sakai-table-searchFilter
	{
		margin-top: 10px;
	}
	.sakai-table-searchFilter
	{
		@include flex-grow(1);

		.sakai-table-searchFilter-searchField
		{
			margin-right: 4px;
			width: 200px;
			@include flex-grow(1);
		}

		input[type=button], input[type=submit],
		input[type=button]:disabled, input[type=submit]:disabled,
		button, button:disabled
		{
			margin: 0 4px 0 0;
		}
	}

	.sakai-table-pagerContainer
	{
		margin-bottom: 10px;
		text-align: center;
		margin-left: auto;
		padding-left: 10px;
	}
	.sakai-table-pagerLabel
	{
		padding: 0 5px 3px 5px;
		font-size: 12px;
		color: var(--sakai-text-color-2);
		text-align: center;
	}
	.sakai-table-pagerControls
	{
		@include display-flex();
		@include justify-content(center);
		padding: 0;

		label
		{
			display: none;
		}

		input, button
		{
			font-size: 12px;
			line-height: 1;

			&:first-of-type
			{
				margin-left: 0;
			}
		}

		input, select, button
		{
			margin: 0 0 0 $standard-space;
		}

	}

	.sakai-table-toolBar-centre
	{
		margin-bottom: 10px;
	}

	.sakai-table-viewFilter
	{
		select
		{
			width: 100%;
		}
		
		input[type=button], input[type=submit], button
		{
			margin: $standard-space;
		}
		
		input[type=radio], input[type=checkbox]
		{
			margin: 0;
		}

		input[type=radio] ~ label, input[type=checkbox] ~ label
		{
			margin-right: $standard-space;
		}
		
		&.act 
		{
			margin: 0;	// remove margins added with .act
		}
	}

	.sakai-table-searchFilterControls
	{
		@include display-flex();
		width: 100%;

		input:last-of-type, button:last-of-type
		{
			margin-right: 0;
		}
		
		&.act 
		{
			margin: 0;	// remove margins added with .act
		}
	}

	.sakai-table-buttonContainer {
		@include display-flex();
		@include flex-wrap(wrap);
		@include justify-content(center);
		input:last-of-type, button:last-of-type
		{
			margin-right: 0;
		}

		input[type=button], input[type=submit], button {
			margin: 0 calc(#{$standard-spacing} / 2) $standard-spacing 0 !important;
		}
		
		&.act 
		{
			margin: 0;	// remove margins added with .act
		}
	}

	@media #{$tablet}
	{
		@include flex-direction(column);
		@include justify-content(flex-start);
		@include align-items(center);

		.sakai-table-filterContainer, .sakai-table-filterGroupContainer, .sakai-table-viewFilter
		{
			margin-right: 0;
			padding-right: 0;
		}

		.sakai-table-pagerContainer
		{
			margin-left: 0;
			padding-left: 0;
		}

		.sakai-table-searchFilter .sakai-table-searchFilter-searchField
		{
			width: 150px;
		}
	}

	/* specific breakpoint based on width of pager controls, allows them to stack when there isn't enough room */
	@media #{$smallPhone}
	{
		.sakai-table-pagerControls
		{
			@include flex-wrap(wrap);
			@include justify-content(center);

			.sakai-table-pagerPageSize
			{
				order: -1;
				width: 100%;
				margin-bottom: 10px;
			}

			button, input
			{
				line-height: 1.5;
			}

			select
			{
				margin-left: 0;
			}
		}

		.sakai-table-searchFilter, .sakai-table-viewFilter
		{
			@include flex-direction(column);
			@include align-items(flex-start);
		}

		.sakai-table-searchFilter .sakai-table-searchFilter-searchField
		{
			width: 100px;
		}
	}
}

.sakai-table-toolBar.sakai-table-toolBar-bottom
{
	@include align-items(flex-start);
	margin-bottom: $standard-spacing;

	.sakai-table-filterContainer, .sakai-table-filterGroupContainer
	{
		margin: $standard-spacing auto 0 0;
	}

	.sakai-table-buttonContainer
	{
		margin-top: $standard-spacing;
	}

	.sakai-table-pagerContainer
	{
		@include display-flex();
		@include flex-direction(column-reverse);
		margin: $standard-spacing 0 0 auto;

		.sakai-table-pagerLabel
		{
			padding: 3px calc(#{$standard-spacing} / 2) 0 calc(#{$standard-spacing} / 2);
		}
	}

	@media #{$tablet}
	{
		@include align-items(center);

		.sakai-table-filterContainer, .sakai-table-filterGroupContainer
		{
			margin-right: 0;
		}

		.sakai-table-pagerContainer
		{
			margin-left: 0;
		}
	}
}

.#{$namespace}html .tablesorter {
	font: #{$font-size-base} $font-family;
}

.#{$namespace}html .tablesorter,
.#{$namespace}html .tablesorter th,
.#{$namespace}html .tablesorter thead td,
.#{$namespace}html .tablesorter td,
.#{$namespace}html .tablesorter tr.even>td {
	background-color: var(--sakai-background-color-1);
	color: var(--sakai-text-color-1);
}

.#{$namespace}html .tablesorter td,
.#{$namespace}html .tablesorter .tablesorter-filter-row td {
	border-bottom: 1px solid var(--sakai-border-color);
}

.#{$namespace}html .tablesorter th,
.#{$namespace}html .tablesorter thead td {
	border-bottom: 2px solid var(--sakai-border-color);
}

.#{$namespace}html .tablesorter .header,
.#{$namespace}html .tablesorter .tablesorter-header {
	background-image: none;
}

.#{$namespace}html .tablesorter thead .headerSortUp,
.#{$namespace}html .tablesorter thead .tablesorter-headerAsc,
.#{$namespace}html .tablesorter thead .tablesorter-headerSortUp
.#{$namespace}html .tablesorter thead .headerSortDown,
.#{$namespace}html .tablesorter thead .tablesorter-headerDesc,
.#{$namespace}html .tablesorter thead .tablesorter-headerSortDown,
.#{$namespace}html .tablesorter tfoot .tablesorter-headerAsc,
.#{$namespace}html .tablesorter tfoot .tablesorter-headerDesc,
.#{$namespace}html .tablesorter tfoot .tablesorter-headerSortDown,
.#{$namespace}html .tablesorter tfoot .tablesorter-headerSortUp {
	border-bottom-color: var(--sakai-text-color-1);
	background-image: none;
}

.#{$namespace}html .tablesorter .header::before,
.#{$namespace}html .tablesorter .tablesorter-header::before,
.#{$namespace}html .tablesorter .headerSortUp::before,
.#{$namespace}html .tablesorter .tablesorter-headerAsc::before,
.#{$namespace}html .tablesorter .tablesorter-headerSortUp::before,
.#{$namespace}html .tablesorter .tablesorter-headerDesc::before,
.#{$namespace}html .tablesorter .tablesorter-headerSortDown::before,
.#{$namespace}html .tablesorter .tablesorter-headerSortUp::before {
	@extend .fa;
	@extend .fa-arrows-v;
	float:right;
}

.#{$namespace}html .tablesorter .headerSortUp::before,
.#{$namespace}html .tablesorter .tablesorter-headerAsc::before,
.#{$namespace}html .tablesorter .tablesorter-headerSortUp::before {
	@extend .fa-caret-up;
}

.#{$namespace}html .tablesorter .headerSortDown::before,
.#{$namespace}html .tablesorter .tablesorter-headerDesc::before,
.#{$namespace}html .tablesorter .tablesorter-headerSortDown::before {
	@extend .fa-caret-down;
}

.#{$namespace}html .tablesorter tr.odd>td,
.#{$namespace}html .tablesorter .tablesorter-filter-row,
.#{$namespace}html .tablesorter .tablesorter-filter-row td {
	background-color: var(--sakai-background-color-2);
	color: var(--sakai-text-color-1);
}

.#{$namespace}html .tablesorter tbody>tr.even:hover>td,
.#{$namespace}html .tablesorter tbody>tr.hover>td,
.#{$namespace}html .tablesorter tbody>tr.odd:hover>td,
.#{$namespace}html .tablesorter tbody>tr:hover>td,
.#{$namespace}html .tablesorter tbody>tr:hover tbody td {
	background-color: var(--sakai-background-color-3);
	color: var(--sakai-text-color-1);
}

.#{$namespace}html .tablesorter thead>tr:hover td {
	background-color: var(--sakai-background-color-1);
}

.#{$namespace}html .tablesorter tbody tbody td,
.#{$namespace}html .tablesorter thead tbody td {
	border-bottom: none;
}

.#{$namespace}html .tablesorter input .tablesorter-filter,
.#{$namespace}html .tablesorter select .tablesorter-filter {
	background-color: var(--sakai-background-color-1);
	border: 1px solid var(--sakai-border-color);
	color: var(--sakai-text-color-1);
}
.#{$namespace}html .tablesorter .tablesorter-errorRow td {
	background-color: var(--warnBanner-bgcolor);
	border-color: var(--warnBanner-bordercolor);
	color: var(--warnBanner-color);
}
.#{$namespace}html .tablesorter-bootstrap i.tablesorter-icon {
	display: none;
}

.#{$namespace}html table img[src*="sortascending.gif"],
.#{$namespace}html table img[src*="sortdescending.gif"] {
	filter: var(--sakai-image-invert);
}
